<template>
	<div class="special_list_wrapper">
		<div class="headbox"><h2>重大专题</h2></div>
		<el-row class="listbox" :gutter="40">
			<el-col :span="6" v-for="(item, index) in journalData" :key="index">
				<dl>
					<dt>
						<a :href="item.linkAddr" target="_blank"><img :src="item.httpUrl" :alt="item.name" /></a>
					</dt>
					<dd>
						<a :href="item.linkAddr" target="_blank">{{ item.name }}</a>
					</dd>
				</dl>
			</el-col>
		</el-row>
		<sw-pagination :total="dataCount" :page.sync="listQuery.page" :limit.sync="listQuery.limit" notice="数据"></sw-pagination>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			dataCount: 0,
			listQuery: {
				page: 1,
				limit: 12
			},
			journalData: []
		};
	},
	mounted() {
		this.getJournalListData();
	},
	methods: {
		...mapActions(['getImageData']),

		//获取报纸列表
		getJournalListData() {
			this.getImageData({ ...this.listQuery, columnId: '211', status: '1' }).then((res) => {
				this.dataCount = parseInt(res.count);
				this.journalData = [...res.data];
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.special_list_wrapper {
	padding-bottom: 64px;
	.headbox {
		display: flex;
		align-items: center;
		padding: 0 15px;
		height: 72px;
		background: url('../../assets/img/bg_headbox.png') no-repeat center;
		border: solid 1px #f4f4f4;
		h2 {
			font-size: 24px;
			line-height: 66px;
			font-weight: bold;
			font-family: 'simsun';
			color: #357c65;
			border-bottom: solid 3px #357c65;
			padding-top: 3px;
		}
	}
	.listbox {
		margin-top: 24px;
		.el-col {
			margin-bottom: 40px;
		}
		dl {
			border: solid 1px #ebedee;
		}
		dt {
			position: relative;
			padding-top: 62.5%;
			img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		dd {
			font-size: 16px;
			font-weight: bold;
			padding: 15px;
			text-align: center;
			border-top: solid 1px #ebedee;
		}
		a {
			display: block;
			color: #333;
			text-decoration: none;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		dl:hover {
			box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
			a {
				color: #357c65;
			}
		}
	}
}
</style>
